<template>
	<view>
		<mpvue-cropper ref="cropper" :option="cropperOpt" @ready="cropperReady" @beforeDraw="cropperBeforeDraw"
		 @beforeImageLoad="cropperBeforeImageLoad" @beforeLoad="cropperLoad"></mpvue-cropper>
		<view class="cropper-buttons">
			<view class="getCropperImage" @tap="getCropperImage">
				保存图片
			</view>
		</view>
	</view>
</template>

<script>
	import MpvueCropper from 'mpvue-cropper'
	import util from '../../../utils/util.js'
	import { mineModule } from "../../../modules/mine.js"
	import { mapState, mapMutations } from 'vuex'

	const Mine = new mineModule()
	let wecropper

	const device = util.getSystemInfo()
	const width = device.windowWidth

	let height = device.windowHeight - 50
	//#ifdef MP-WEIXIN
	height = height + 50
	//#endif


	const cutWidth = width - 10
	export default {
		data() {
			return {
				cropperOpt: {
					id: 'cropper',
					width,
					height,
					scale: 3,
					zoom: 8,
					cut: {
						x: (width - cutWidth) / 2,
						y: (height - cutWidth) / 2,
						width: cutWidth,
						height: cutWidth
					}
				},
				imgUrl: ''
			}
		},

		components: {
			MpvueCropper
		},
		onLoad(e) {
			this.imgUrl = e.picture
			this.empID = e.empID
			console.log(e.empID)
		},
		mounted() {
			wecropper = this.$refs.cropper
			this.uploadTap(this.imgUrl)
		},
		methods: {
			...mapMutations(['isUpdate']), // 调用vuex 里的方法
			cropperReady(...args) {
				console.log('cropper ready!')
			},
			cropperBeforeImageLoad(...args) {
				console.log('before image load')
			},
			cropperLoad(...args) {
				console.log('image loaded')
			},
			cropperBeforeDraw(...args) {
				// Todo: 绘制水印等等
			},
			uploadTap(src) {
				wecropper.pushOrigin(src)
			},
			getCropperImage() {
				wecropper.getCropperImage()
					.then((src) => {
						const list = this._filterList([this.imgUrl],'portrait')
						uni.showLoading({
							title: '上传中'
						})
						return Mine.postPortrait(list,this.empID)
					})
					.then(()=>{
						this.isUpdate()
						uni.hideLoading()
						uni.showToast({
							title: '上传成功！'
						})
						setTimeout(()=>{
							uni.navigateBack()
						},1000)
					})
					.catch(e => {
						console.error('获取图片失败')
					})
			},
			_filterList(list, typeName) { // 转换设置数据元素对象
				let newList = []
				list.forEach((item, index) => {
					newList.push({
						uri: item.uri ? item.uri : item,
						name: typeName + index
					})
				})
				return newList
			}
		}
	}
</script>

<style>
	.cropper-wrapper {
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		justify-content: center;
		height: 100%;
		background-color: #e5e5e5;
	}

	.cropper-buttons {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		justify-content: center;
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 50px;
		line-height: 50px;
	}

	.cropper-buttons .upload,
	.cropper-buttons .getCropperImage {
		width: 50%;
		text-align: center;
	}

	.cropper {
		position: absolute;
		top: 0;
		left: 0;
	}

	.cropper-buttons {
		background-color: rgba(0, 0, 0, 0.95);
		color: #fff;
	}
</style>
